<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.height {
				background-color: deeppink;
			}
		</style>
	</head>

	<body>
		<!--			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.			
		-->
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">从小到大</button>
		<button class="num">从大到小</button>
		<button class="back">反选</button>
		<button class="all">全选</button>
		<table border="1" cellspacing="0" cellpadding="10">
			<tr>
				<th>序列号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
				<th>选择</th>
			</tr>

		</table>
		<script type="text/javascript">
			var info = [{
					name: "胡杭",
					age: 16
				},
				{
					name: "胜明",
					age: 22
				},
				{
					name: "军毅",
					age: 21
				},
				{
					name: "晓华",
					age: 13
				},
				{
					name: "盛聪",
					age: 23
				},
				{
					name: "侦剑",
					age: 32
				},
				{
					name: "红翔",
					age: 25
				},
				{
					name: "超维",
					age: 18
				},
				{
					name: "士琪",
					age: 22
				},
				{
					name: "艳华",
					age: 20
				}
			];
			var add = document.querySelector(".add"),
				del = document.querySelector(".del"),
				sort = document.querySelector(".sort"),
				tb = document.querySelector("tbody"),
				num = document.querySelector(".num"),
				back = document.querySelector(".back"),
				all = document.querySelector(".all"),
				height = document.querySelector(".height")
			index = 0;
			add.addEventListener("click", function() {
				console.log(info[index].name);
				tb.innerHTML += "<tr><td>" + (index + 1) + "</td><td>" + info[index].name + "</td><td>" + info[index].age + "</td><td><button>删除</button></td><td><input type='checkbox'/></td></tr>";
				//			    ++index>=info.length?index==0:"";
				if(++index >= info.length) {
					index = 0;
				}
			});
			del.addEventListener("click", function() {
				var checkboxs = document.querySelectorAll("input");
				console.log();
				for(var i = 0; i < checkboxs.length; i++) {
					if(checkboxs[i].checked) {
						checkboxs[i].parentNode.parentNode.remove()
					}
				}
				/*
				 *1.获取多选框
				 * 2.判断是否选中
				 * 3.根据选中状态删除所在的行
				 *
				 */
			});
			tb.addEventListener("click", function(e) {
				if(e.target.nodeName == "BUTTON") {
					e.target.parentNode.parentNode.remove();
				}
			});
			sort.addEventListener("click", function() {
				var trs = document.querySelectorAll("tr:not(:first-child)"),

					trs_arr = new Array();

				for(var i = 0; i < trs.length; i++) {
					trs_arr.push(trs[i]);
				}
				trs_arr.sort(function(a, b) {
					return a.cells[2].innerText - b.cells[2].innerText;
				});
				for(var i = 0; i < trs_arr.length; i++) {
					tb.appendChild(trs_arr[i]);
				}
			});
			//从大到小
			num.addEventListener("click", function() {
				var trs = document.querySelectorAll("tr"),
					trs_arr = new Array();
				for(var i = 0; i < trs.length; i++) {
					trs_arr.push(trs[i]);
				}
				trs_arr.sort(function(a, b) {
					return b.cells[0].innerText - a.cells[0].innerText;
				});
				for(var i = 0; i < trs_arr.length; i++) {
					tb.appendChild(trs_arr[i]);
				}
			});
			//全选
			all.addEventListener("click", function() {
				var checkboxs = document.querySelectorAll("input"),
					cou = 0;
				cou++;
				if(cou < 2) {
					for(var i = 0; i < checkboxs.length; i++) {
						if(!checkboxs[i].checked) {
							checkboxs[i].checked = true;
							checkboxs[i].parentNode.parentNode.classList.toggle("height")
						}
					}
				}
				if(cou == 2) {
					cou = 0;
				}
			});
			//反选
			back.addEventListener("click", function() {
				var checkboxs = document.querySelectorAll("input");
				for(var i = 0; i < checkboxs.length; i++) {
					if(checkboxs[i].checked) {
						checkboxs[i].checked = false;
						checkboxs[i].parentNode.parentNode.classList.remove("height")
					} else {
						checkboxs[i].checked = true;
						checkboxs[i].parentNode.parentNode.classList.add("height")
					}
				}
			});
			//高亮
			tb.addEventListener("click", function(e) {
				if(e.target.nodeName == "INPUT") {
					e.target.parentNode.parentNode.classList.toggle("height");
				}
			});
		</script>
	</body>

</html>